<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!-- 下拉菜单需要依赖jquery和bootstrap.bundle.js -->
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <!-- 分割按钮下拉框 -->
        <div class="btn-group">
            <button type="button" class="btn btn-success">Action</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <span class="sr-only">下拉按钮</span>
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">连接1</a>
                <a href="#" class="dropdown-item">连接2</a>
                <a href="#" class="dropdown-item">连接3</a>
            </div>
        </div>
        <hr>
        <!-- 大型下拉按钮 -->
        <div class="dropdown">
            <!-- 按钮上添加. btn-lg可以让下拉菜单变大 -->
            <button type="button" class="btn btn-primary dropdown-toggle btn-lg" data-toggle="dropdown">
                大型下拉菜单
            </button>
            <!-- 下拉菜单的选项 -->
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">连接1</a>
                <a href="#" class="dropdown-item">连接2</a>
                <a href="#" class="dropdown-item">连接3</a>
            </div>
        </div>
        <hr>
        <!-- 大型分割下拉按钮 -->
        <!-- 添加.btn-group-lg可以让分割下拉按钮变大 -->
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-success">Action</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <span class="sr-only">下拉按钮</span>
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">连接1</a>
                <a href="#" class="dropdown-item">连接2</a>
                <a href="#" class="dropdown-item">连接3</a>
            </div>
        </div>

    </div>
    
</body>
</html>